<template>
	<div id="setting">

		<!-- 导航头 -->
		<ul class="layui-nav layui-bg-blue">
			<li class="layui-nav-item" :class="{'layui-this':actvie === 'site_panel'}" @click="actvie = 'site_panel'">
				<a href="javascript:">网站列表设置</a>
			</li>

			<li class="layui-nav-item" :class="{'layui-this':actvie === 'help_panel'}" @click="actvie = 'help_panel'">
				<a href="javascript:">帮助</span></a>
			</li>

			<li class="layui-nav-item" :class="{'layui-this':actvie === 'about_panel'}" @click="actvie = 'about_panel'">
				<a href="javascript:">关于</span></a>
			</li>

			<li class="layui-nav-item layui-layout-right">
				<i @click="backIndex" title="回到主页" class="layui-icon">&#xe68e;</i>
			</li>
		</ul>

		<div class="body">
			<div v-show="actvie === 'site_panel'" class="site_panel">
				<div class="layui-form layui-form-pane">
					<div class="layui-form-item" id="cloud_link">
						<label class="layui-form-label">云链接</label>
						<div class="layui-input-inline">
							<input type="text" placeholder="云网站列表链接,json文件" autocomplete="off" class="layui-input"
								v-model="cloud_link">
						</div>
						<div class="layui-btn-container container_row_c_b">
							<button class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm"
								title="保存云链接并加载数据到本地" @click.stop="load_cloud">加载</button>
						</div>
					</div>

					<div class="layui-form-item" id="cloud_link">
						<label class="layui-form-label">本地文件</label>
						<div class="layui-input-inline">
							<label for="local_file" class="layui-input local_file_label"
								:class="{'color-blank':local_file_name}">{{local_file_name || '本地json文件'}}
								<input id="local_file" type="file" style="height: 0px;width: 0px;"
									v-on:change="local_file">
							</label>
						</div>
						<div class="layui-btn-container container_row_c_b">
							<button class="layui-btn layui-btn-normal layui-btn-radius  layui-btn-sm"
								title="保存文件地址并加载数据到本地" @click.stop="load_file">加载</button>
						</div>
					</div>

					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">本地网站列表数据</label>
						<div class="layui-input-block">
							<textarea placeholder="网站列表数据" class="layui-textarea" cols="50"
								v-model="applicationCategories"></textarea>
						</div>
					</div>
					<div class="layui-form-item container_row_c_e">
						<button class="layui-btn layui-btn-normal layui-btn-radius"
							@click="save_application_categories">保存</button>

						<button class="layui-btn layui-btn-normal layui-btn-radius"
							@click="refresh_application_categories">刷新网站列表</button>
					</div>
				</div>
			</div>

			<div v-show="actvie === 'help_panel'" class="help_panel">
				<webview ref="help_web" class="help_web" src="http://1.116.132.63/sup/help.html">
				</webview>
			</div>

			<div v-show="actvie === 'about_panel'" class="about_panel">
				<webview ref="about_web" class="about_web" src="http://1.116.132.63/sup/about.html">
				</webview>
			</div>
		</div>

	</div>
</template>

<script>
	// @ 代表从renderer开始
	import api from '@/plugin/api.js'

	export default {
		name: 'setting',
		data: () => {
			return {
				actvie: "site_panel",
				applicationCategories: localStorage.getItem("applicationCategories"),
				cloud_link: localStorage.getItem("cloud_link"),
				local_file_name: localStorage.getItem("local_file_name")
			}
		},
		methods: {
			backIndex: function() {
				this.$emit("backIndex");
			},

			local_file: function(res) {
				// const files = res.dataTransfer.files;
				var {
					name,
					path
				} = res.target.files[0];

				// 取消选择
				if (!name) {
					return;
				}

				if (!name.endsWith(".json")) {
					window.layer.msg('文件类型不支持，只能json文件', {
						icon: 5
					});
					return;
				}

				this.local_file_name = path;
			},

			load_file: function() {
				if(!this.local_file_name){
					window.layer.msg('请先选择文件', {
						icon: 5
					});
					return;
				}
				
				localStorage.setItem("local_file_name", this.local_file_name);

				try {
					var applicationCategories =
						api.loadApplicationCategoriesByFile(this.local_file_name);
					if (applicationCategories.length == 0) {
						window.layer.msg('数据为空', {
							icon: 5
						});
						return;
					}
					this.applicationCategories = applicationCategories;
					window.layer.msg('加载数据成功', {
						icon: 1
					});
				} catch (e) {
					window.layer.msg(`加载本地文件失败${e.message}`, {
						icon: 5
					});
				}
			},

			load_cloud: function() {
				if(!this.cloud_link){
					window.layer.msg('请先输入网络类别列表链接', {
						icon: 5
					});
					return;
				}
				
				localStorage.setItem("cloud_link", this.cloud_link);

				// 请求
				try {
					api.requestBase(this.cloud_link, (succ_res) => {
						var applicationCategories = succ_res;
						if (applicationCategories.length == 0) {
							window.layer.msg('数据为空', {
								icon: 5
							});
							return;
						}
						this.applicationCategories = applicationCategories;
						window.layer.msg('加载数据成功', {
							icon: 1
						});
					}, (err_res) => {
						console.log(err_res);
						window.layer.msg('加载网络文件失败', {
							icon: 5
						});
					})
				} catch (e) {
					console.log(e);
					window.layer.msg(`加载网络文件失败${e.message}`, {
						icon: 5
					});
				}
			},

			show_err: function(msg) {
				window.layer.msg(msg, {
					icon: 5
				});
			},

			check_application_categories: function(applicationCategoriesStr) {
				try {
					var applicationCategories = JSON.parse(applicationCategoriesStr);
					if (!Array.isArray(applicationCategories)) {
						this.show_err('网站列表必须是一个JsonArray形式');
						return false;
					}
					for (var idx in applicationCategories) {
						var category = applicationCategories[idx];
						if (!category.name || category.name.length == 0) {
							this.show_err('网站类别必须有name');
							return false;
						}
						if (!category.items || category.items.length == 0) {
							this.show_err('网站类别必须有items,至少一个网站');
							return false;
						}

						for (var jdx in category.items) {
							var item = category.items[jdx];
							if (!item.name || item.name.length == 0) {
								this.show_err('网站必须有name');
								return false;
							}
							if (!item.url || item.url.length == 0) {
								this.show_err('网站必须有url');
								return false;
							}
							if (!item.createSearchUrl || item.createSearchUrl.length == 0) {
								this.show_err('网站必须有createSearchUrl');
								return false;
							}
						}
					}
				} catch (e) {
					this.show_err('json格式不符合,请查看帮助编写正确');
					return false;
				}
				return true;
			},

			save_application_categories: function() {
				if (!this.check_application_categories(this.applicationCategories)) {
					return;
				}
				localStorage.setItem("applicationCategories", this.applicationCategories);
				window.layer.msg('保存成功', {
					icon: 1
				});
			},

			refresh_application_categories: function() {
				this.$emit("refresh_application_categories");
				window.layer.msg('刷新成功', {
					icon: 1
				});
			},
		},
		mounted: function() {
			// 设置webview的滚动条
			for (var web_name in this.$refs) {
				const web = this.$refs[web_name];
				web.addEventListener('dom-ready', () => {
					web.insertCSS(`
						::-webkit-scrollbar {
							width: 0px;
						}
					
						::-webkit-scrollbar-thumb {
							width: 0px;
							background-color: #1e9fff69;
						}`);
				});
			}
		}
	};
</script>

<style>
	#setting .layui-nav .layui-nav-item {
		line-height: 50px;
	}

	#setting .layui-nav .layui-this:after {
		height: 3px;
	}

	#setting .body {
		margin-top: 30px;
		margin-left: 20px;
		margin-right: 20px;

		height: calc(100% - 80px);
		width: calc(100% - 40px);
	}

	#setting .site_panel {
		margin: auto;
		width: 800px;
	}

	#cloud_link .layui-btn-container.container_row_c_b {
		height: 38px;
	}

	#cloud_link .layui-btn-container .layui-btn {
		margin-right: 0px;
		margin-bottom: 0px;
	}

	#cloud_link .layui-input-inline {
		width: 80%;
	}

	.local_file_label {
		line-height: 38px;
		color: #777;
	}

	.color-blank {
		color: #000;
	}

	#setting .layui-form-pane .layui-form-text .layui-textarea {
		min-height: 450px;
	}

	.help_panel,
	.help_web,
	.about_web,
	.about_panel {
		height: 100%;
	}
</style>
